<template>
  <div
    v-if="!$slots.default"
    class="text-[14px] text-[#111] row-center-center w-[50%]"
    @click.stop="showPicker = true"
  >
    <div @click="handleShow" class="mr-[12px]">{{ actionText }}</div>
    <svg-icon class="w-[10px] h-[10px]" name="select-down" />
  </div>
  <slot
    v-else
    :actionText="actionText"
    :click="
      () => {
        showPicker = true;
      }
    "
  />
  <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
    <van-picker
      :title="title"
      :columns="columns"
      v-model="selectedValues"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    />
  </van-popup>
</template>
<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    val: string;
    title: string;
    columns: { text: string; value: string }[];
  }>(),
  {}
);

const emit = defineEmits(["update:val", "update"]);
const showPicker = ref(false);
const selectedValues = ref([props.val]);
// 获取文本
const actionText = computed(() => {
  return props.columns.find(v => v.value === props.val)?.text as string;
});

// 显示选择
const handleShow = () => {
  showPicker.value = true;
  selectedValues.value = [props.val];
};

defineExpose({
  handleShow: handleShow
});
// 选择
const onConfirm = ({ selectedValues }: any) => {
  const selectedValue = selectedValues[0];
  emit("update:val", selectedValue);
  showPicker.value = false;
  setTimeout(() => {
    emit("update");
  });
};
</script>
